<template>
  <div>
    <el-dialog
      :title="editFlag ? '编辑注单' : '新增注单'"
      class="addDialog"
      :visible.sync="dialogVisible1"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="55%"
    >
      <el-form
        ref="addform"
        :model="vpnform"
        :rules="rulesVpnform"
        label-width="110px"
      >
        <el-form-item label="选手A名称:" prop="playerA">
          <el-select v-model="vpnform.playerA">
            <el-option
              v-for="item in playerList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-input v-model="vpnform.playerA" placeholder="请输入"></el-input> -->
        </el-form-item>
        <el-form-item label="选手B名称:" prop="playerB">
          <el-select v-model="vpnform.playerB">
            <el-option
              v-for="item in playerList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="选手A赛前得分:"
          prop="curPointA"
          label-width="160px"
        >
          <el-input v-model="vpnform.curPointA" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item
          label="选手B赛前得分:"
          prop="curPointB"
          label-width="160px"
        >
          <el-input v-model="vpnform.curPointB" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item
          label="选手A赛前心理素质附分:"
          prop="psyqualityA"
          label-width="160px"
        >
          <el-select v-model="vpnform.psyqualityA">
            <el-option
              v-for="item in psyqualityList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-input v-model="vpnform.playerA" placeholder="请输入"></el-input> -->
        </el-form-item>
        <el-form-item
          label="选手B赛前心理素质附分:"
          prop="psyqualityB"
          label-width="160px"
        >
          <el-select v-model="vpnform.psyqualityB">
            <el-option
              v-for="item in psyqualityList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下注资金:" prop="betmoney">
          <el-select v-model="vpnform.betmoney">
            <el-option
              v-for="item in betmoneyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="赔率:" prop="odds">
          <el-input v-model="vpnform.odds" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="结果:" prop="result">
          <el-select v-model="vpnform.result">
            <el-option
              v-for="item in resultsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下注时间:" prop="createTime">
          <el-date-picker
            v-model="vpnform.createTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitaddForm('addform')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import table from "@/mixins/commontable";
import { columnConfigs } from "./columnConfigs.js";
import { mapState, mapActions } from "vuex";
import { addList, editList, getList, delCurRow } from "@/api/yybl/wstbetdata";
export default {
  name: "rule",
  components: {},
  mixins: [table],
  props: {
    dialogVisible1: {
      type: Boolean,
      default: false,
    },
    editFlag: {
      type: Boolean,
      default: false,
    },
    scene: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      columnConfigs,
      sceneVisible: false,

      rules: [
        {
          label: "完全匹配",
          value: "0",
        },
        {
          label: "频次匹配",
          value: "1",
        },
        {
          label: "区间匹配",
          value: "2",
        },
      ],
      vpnform: {},
      rulesVpnform: {
        modelName: [
          { required: true, message: "请输入模型名称", trigger: "change" },
          //   { validator: validateIpPort, trigger: "blur" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        trustType: [
          { required: true, message: "请输入信任类型", trigger: "blur" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        usingStatus: [
          { required: true, message: "请选择状态", trigger: "change" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        sceneId: [
          //   { validator: checkNumber, trigger: "blur" },
          { required: true, message: "请选择风险场景", trigger: "blur" },
          // { type: "number", message: "大小必须为数字值" },
        ],
      },
      selectTion: [],
    };
  },
  watch: {},
  computed: {
    ...mapState("common", [
      "sceneList",
      "xinrenList",
      "playerList",
      "betmoneyList",
      "resultsList",
      "psyqualityList",
    ]),
    showForm() {
      if (this.vpnform.type == 0) {
        if (this.vpnform.attr == 0) {
          return 0;
        } else if (this.vpnform.attr == 1) {
          return 1;
        } else {
          return 2;
        }
      } else {
        return 2;
      }
    },
  },
  methods: {
    ...mapActions("common", ["getsceneList"]),
    getOptionLabel(val, list) {
      return list.filter((i) => i.value == val)[0]?.label;
    },
    changeSence() {
      this.sceneVisible = true;
    },
    handleSceneClose() {
      this.sceneVisible = false;
      // this.selectTion.splice(0);
      this.$refs.table.clearSelection();
      // this.vpnform.showSence = this.selectTion.map((i) => i.content).join(";");
    },
    formatTrancy(val) {
      let a = Number(val);
      return Math.round(a * 100) + "%";
    },
    formatTooltip(val) {
      return val + "%";
    },
    formatTooltipRotation(val) {
      return val + "°";
    },
    formatTooltipSize(val) {
      return val;
    },
    handleChange(val) {
      console.log(val);
    },
    add(row) {
      this.vpnform = {
        playerA: "",
        playerB: "",
        curPointA: "",
        curPointB: "",
        psyqualityA: "",
        psyqualityB: "",
        betmoney: "5",
        odds: "",
        result: "",
        createTime: "",
      };
      this.$nextTick(() => {
        this.$refs?.addform?.clearValidate();
      });
    },
    edit(row) {
      const {
        id,
        playerA,
        playerB,
        curPointA,
        curPointB,
        psyqualityA,
        psyqualityB,
        betmoney,
        odds,
        result,
        createTime,
      } = row;
      this.vpnform = {
        id,
        playerA,
        playerB,
        curPointA,
        curPointB,
        psyqualityA,
        psyqualityB,
        betmoney,
        odds,
        result,
        createTime,
      };
      console.log(this.vpnform.sceneId);
      this.$refs?.addform?.clearValidate();
    },
    submitaddForm() {
      console.log(this.vpnform);
      this.$refs["addform"].validate((val) => {
        console.log(val);
        if (val) {
          const {
            id, //编辑的时候才有
            playerA,
            playerB,
            curPointA,
            curPointB,
            psyqualityA,
            psyqualityB,
            betmoney,
            odds,
            result,
            createTime,
          } = this.vpnform;
          let params = {
            // id, //编辑的时候才有
            playerA,
            playerB,
            curPointA,
            curPointB,
            psyqualityA,
            psyqualityB,
            betmoney,
            odds,
            result,
            createTime,
          };
          console.log(params);
          if (this.editFlag) {
            params.id = id;
            editList(params)
              .then((res) => {
                if (res.rescode == 200 || res.code == 200) {
                  this.$emit("update:dialogVisible1", false);
                  this.$message.success("编辑成功");
                  this.$emit("submit", 200);
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            // 调用新增接口
            addList(params)
              .then((res) => {
                if (res.rescode == 200 || res.code == 200) {
                  this.$emit("update:dialogVisible1", false);
                  this.$message.success("新增成功");
                  this.$emit("submit", 200);
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        }
      });
    },
    handleClose() {
      this.$emit("update:dialogVisible1", false);
    },
    async refresh() {
      // this.getlists(getList, {});
      try {
        let params = {
          decisionPointId,
        };
        const res = await listStrategy(params);
        if (res && res.rescode === 200) {
          this.strategyList = res.data.dataList.map((i) => ({
            value: i.id,
            label: i.policyName,
          }));
          this.tableData.forEach((i) => {
            i.strategy = "";
          });
        } else {
          this.strategyList.splice(0);
        }
      } catch (error) {
        this.strategyList.splice(0);
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.selectTion = val;
    },
    submitScene() {
      this.vpnform.sceneName = this.selectTion.map((i) => i.sceneName).join();
      this.vpnform.sceneId = this.selectTion.map((i) => i.id).join();
      this.sceneVisible = false;
      this.$refs.table.clearSelection();
    },
  },
  created() {
    // this.refresh();
    // this.getsceneList();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}
.sceneDialog {
  ::v-deep .el-dialog__body {
    padding: 0px 20px 30px 20px;
  }
}

::v-deep .el-button {
  .el-icon-edit + span {
    margin-left: 0px;
  }
  .el-icon-delete + span {
    margin-left: 0px;
  }
}
::v-deep .el-dialog {
  min-width: 640px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}
.addDialog {
  .el-dialog {
    min-width: 640px;
  }

  .el-form {
    display: flex;
    .el-form-item {
      width: 50%;
    }
    .el-form-item.slider {
      width: 50%;
    }
    .changjing {
      width: 100%;
    }
    ::v-deep.range {
      width: 100%;
      .el-form-item__content {
        display: flex;
        .timepicker {
          width: 100%;
        }
      }
    }
  }
}

::v-deep .el-drawer {
  min-width: 700px;
  .el-drawer__body {
    padding: 0 15px;
  }
  .demo-drawer__footer {
    margin-top: 16px;
    text-align: end;
  }
}
</style>
